import * as echarts from 'echarts'
import { fontSize } from '@/units'
const areaStyle = ['RGBA(254, 231, 231, 1)', 'RGBA(254, 231, 231, .1)']
const eventBarStyle = ['RGBA(42, 121, 255, 1)', 'RGBA(232, 240, 253, 1)']
const moneyBarStyle = ['RGBA(51, 196, 227, 1)', 'RGBA(232, 251, 255, 1)']
const cockpitColorArr = {
  lineColor: 'rgba(255, 140, 76, 1)',
  barColor: ['rgba(49, 195, 227, 1)', 'rgba(49, 195, 227, .4)'],
  areaColor: ['RGBA(250, 171, 126, 1)', 'RGBA(242, 246, 249, 1)'],
}
const BarLine1Option = ({ time, dataList, speedUpList, name, type }) => {
  let options
  if (type == 'cockpit') {
    options = {
      tooltip: {
        trigger: 'axis',
        textStyle: {
          fontSize: fontSize(0.22),
        },
      },
      grid: {
        y: 40,
        x: 50,
        x2: 20,
        y2: 40,
      },
      xAxis: {
        type: 'category',
        data: time,
        axisPointer: {
          type: 'shadow',
        },
        axisLabel: { color: '#868C96' },
        axisLine: {
          lineStyle: {
            color: '#E5E9F2',
            width: 2,
          },
        },
        axisTick: {
          show: false,
        },
        //分隔线样式
        splitLine: {
          lineStyle: {
            color: '#E5E9F2',
          },
        },
        boundaryGap: false,
      },
      yAxis: [
        {
          type: 'value',
          name: '',
          axisLine: {
            lineStyle: {
              color: '#E5E9F2',
            },
          },
          axisTick: {
            show: false,
          },
          //分隔线样式
          splitLine: {
            lineStyle: {
              color: '#E5E9F2',
            },
          },
          axisLabel: {
            show: true,
            formatter: function (value) {
              if (value >= 10000 && value < 10000000) {
                value = value / 10000 + '万'
              } else if (value >= 10000000) {
                value = value / 10000000 + '千万'
              } else if (value <= -10000 && value > -10000000) {
                value = value / 10000 + '万'
              } else if (value <= -10000000) {
                value = value / 10000000 + '千万'
              }
              return value
            },
            color: 'rgba(0, 22, 93, .6)',
          },
          splitNumber: 3,
        },
        {
          type: 'value',
          name: '',
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          //分隔线样式
          splitLine: {
            show: false,
          },
          splitNumber: 3,
        },
      ],
      series: [
        {
          name: name,
          type: 'bar',
          data: dataList,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: cockpitColorArr.barColor[0],
              }, //柱图渐变色
              {
                offset: 1,
                color: cockpitColorArr.barColor[1],
              }, //柱图渐变色
            ]),
            borderRadius: [10, 10, 0, 0],
          },
          barWidth: 12,
        },
        {
          name: '增速',
          type: 'line',
          yAxisIndex: 1,
          data: speedUpList,
          itemStyle: { color: cockpitColorArr.lineColor },
          smooth: true,
          showSymbol: false,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: cockpitColorArr.areaColor[0],
                },
                {
                  offset: 1,
                  color: cockpitColorArr.areaColor[1],
                },
              ],
            },
          },
        },
      ],
    }
  } else {
    options = {
      tooltip: {
        trigger: 'axis',
        textStyle: {
          fontSize: fontSize(0.18),
        },
        formatter: function (params) {
          let str = params[0].axisValueLabel + '<br />'
          params.forEach((item) => {
            if (item.value) {
              str +=
                item.seriesName +
                ' : ' +
                `<span style="color:#206EF2;">${
                  item.seriesName == '增速' ? item.value + '%' : item.value
                }</span>` +
                '<br />'
            } else {
              str +=
                item.seriesName +
                ' : ' +
                `<span style="color:#206EF2;">-</span>` +
                '<br />'
            }
          })
          return str
        },
      },
      grid: {
        y: 40,
        x: 50,
        x2: 40,
        y2: 30,
      },
      legend: {
        type: 'plain',
        left: 'right',
        icon: 'roundRect',
        top: 'top',
        itemWidth: fontSize(0.18),
        itemHeight: fontSize(0.05),
        data: [
          {
            name: name,
            textStyle: {
              fontSize: fontSize(0.16),
              color: '#b5bac8',
            },
          },
          {
            name: '增速',
            textStyle: {
              fontSize: fontSize(0.16),
              color: '#b5bac8',
            },
          },
        ],
      },
      xAxis: {
        type: 'category',
        data: time,
        axisPointer: {
          type: 'shadow',
        },
        axisLabel: { color: '#868C96' },
        axisLine: {
          lineStyle: {
            color: '#E5E9F2',
            width: 2,
          },
        },
        axisTick: {
          show: false,
        },
        //分隔线样式
        splitLine: {
          lineStyle: {
            color: '#E5E9F2',
          },
        },
      },
      yAxis: [
        {
          type: 'value',
          name: '',
          axisLine: {
            lineStyle: {
              color: '#E5E9F2',
            },
          },
          axisTick: {
            show: false,
          },
          //分隔线样式
          splitLine: {
            lineStyle: {
              color: '#E5E9F2',
            },
          },
          axisLabel: {
            show: true,
            formatter: function (value) {
              if (value >= 10000 && value < 10000000) {
                value = value / 10000 + '万'
              } else if (value >= 10000000) {
                value = value / 10000000 + '千万'
              } else if (value <= -10000 && value > -10000000) {
                value = value / 10000 + '万'
              } else if (value <= -10000000) {
                value = value / 10000000 + '千万'
              }
              return value
            },
            color: 'rgba(0, 22, 93, .6)',
          },
        },
        {
          type: 'value',
          name: '',
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#E5E9F2',
            },
          },
          //分隔线样式
          splitLine: {
            lineStyle: {
              color: '#E5E9F2',
            },
          },
          axisLabel: {
            show: true,
            formatter: function (value) {
              if (value >= 10000 && value < 10000000) {
                value = value / 10000 + '万'
              } else if (value >= 10000000) {
                value = value / 10000000 + '千万'
              } else if (value <= -10000 && value > -10000000) {
                value = value / 10000 + '万'
              } else if (value <= -10000000) {
                value = value / 10000000 + '千万'
              }
              return value
            },
            color: 'rgba(0, 22, 93, .6)',
          },
        },
      ],
      series: [
        {
          name: name,
          type: 'bar',
          data: dataList,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: name == '事件(起)' ? eventBarStyle[0] : moneyBarStyle[0],
              }, //柱图渐变色
              {
                offset: 1,
                color: name == '事件(起)' ? eventBarStyle[1] : moneyBarStyle[1],
              }, //柱图渐变色
            ]),
            borderRadius: [10, 10, 10, 10],
          },
          barWidth: 10,
        },
        {
          name: '增速',
          type: 'line',
          yAxisIndex: 1,
          data: speedUpList,
          itemStyle: { color: '#FF6060' },
          smooth: true,
          showSymbol: false,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: areaStyle[0],
                },
                {
                  offset: 1,
                  color: areaStyle[1],
                },
              ],
            },
          },
        },
      ],
    }
  }
  return options
}

export { BarLine1Option }
